<template>
  <div class="dynamic-table-renderer">
    <el-table
      v-if="mode !== 'design' && tableData.length > 0"
      :data="tableData"
      :border="showBorder"
      :show-header="showHeader"
      size="small"
      style="width: 100%"
    >
      <el-table-column
        v-for="column in tableColumns"
        :key="column.paramCode"
        :prop="column.paramCode"
        :label="column.paramName"
        :width="column.columnWidth || 120"
        align="center"
      >
        <template #default="scope">
          <span>{{ formatCellValue(scope.row[column.paramCode], column) }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 设计模式预览 -->
    <div v-else class="design-preview">
      <div class="preview-header">
        <span>动态表格 - {{ groupConfig?.groupName || '参数组' }}</span>
        <span class="row-count">(最多{{ maxRows }}行)</span>
      </div>
      
      <div class="table-preview">
        <div class="table-header">
          <div
            v-for="column in tableColumns"
            :key="column.paramCode"
            class="header-cell"
            :style="{ width: (column.columnWidth || 120) + 'px' }"
          >
            {{ column.paramName }}
          </div>
        </div>
        
        <div class="table-body">
          <div
            v-for="row in Math.min(2, maxRows)"
            :key="row"
            class="table-row"
          >
            <div
              v-for="column in tableColumns"
              :key="column.paramCode"
              class="body-cell"
              :style="{ width: (column.columnWidth || 120) + 'px' }"
            >
              {{ getPreviewValue(column) }}
            </div>
          </div>
          
          <div v-if="maxRows > 2" class="more-rows">
            ... 还有 {{ maxRows - 2 }} 行
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DynamicTableRenderer',
  props: {
    component: {
      type: Object,
      required: true
    },
    config: {
      type: Object,
      default: () => ({})
    },
    mode: {
      type: String,
      default: 'design'
    },
    testData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    groupConfig() {
      const { content = {} } = this.component
      const groupId = content.groupId
      
      if (!groupId || !this.config.paramGroups) return null
      
      // 递归查找参数组
      function findGroup(groups, targetId) {
        for (const group of groups) {
          if (group.groupId === targetId) return group
          if (group.childGroups) {
            const found = findGroup(group.childGroups, targetId)
            if (found) return found
          }
        }
        return null
      }
      
      return findGroup(this.config.paramGroups, groupId)
    },
    
    tableColumns() {
      if (!this.groupConfig) return []
      
      const columns = []
      
      function extractParams(groups) {
        groups.forEach(group => {
          if (group.paramItems) {
            columns.push(...group.paramItems)
          }
          if (group.childGroups) {
            extractParams(group.childGroups)
          }
        })
      }
      
      extractParams([this.groupConfig])
      return columns.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
    },
    
    maxRows() {
      return this.groupConfig?.maxRows || 3
    },
    
    showBorder() {
      return this.component.content?.border !== false
    },
    
    showHeader() {
      return this.component.content?.showHeader !== false
    },
    
    tableData() {
      if (this.mode === 'design') {
        return []
      }
      
      // 从测试数据中获取表格数据
      // 这里需要根据实际数据结构进行调整
      const groupData = this.testData[this.groupConfig?.groupId]
      return Array.isArray(groupData) ? groupData : []
    }
  },
  methods: {
    formatCellValue(value, column) {
      if (value === null || value === undefined) return '-'
      
      if (column.dataType === 'number') {
        const precision = column.precision || 2
        const numValue = Number(value)
        return isNaN(numValue) ? '-' : numValue.toFixed(precision)
      }
      
      return value
    },
    
    getPreviewValue(column) {
      if (column.dataType === 'number') {
        const precision = column.precision || 2
        return (Math.random() * 100).toFixed(precision)
      } else if (column.dataType === 'text') {
        return '示例文本'
      } else {
        return '值'
      }
    }
  }
}
</script>

<style scoped>
.dynamic-table-renderer {
  width: 100%;
  height: 100%;
}

.design-preview {
  padding: 8px;
  color: #666;
  font-style: italic;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 500;
}

.row-count {
  font-size: 0.9em;
  color: #999;
}

.table-preview {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.table-header {
  display: flex;
  background: #f5f7fa;
  border-bottom: 1px solid #e8e8e8;
}

.header-cell {
  padding: 8px 12px;
  font-weight: 500;
  text-align: center;
  border-right: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.header-cell:last-child {
  border-right: none;
}

.table-body {
  background: white;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
}

.table-row:last-child {
  border-bottom: none;
}

.body-cell {
  padding: 8px 12px;
  text-align: center;
  border-right: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.body-cell:last-child {
  border-right: none;
}

.more-rows {
  padding: 8px 12px;
  text-align: center;
  color: #999;
  font-style: italic;
  background: #fafafa;
}
</style>